<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            width: 300px;
            height:300px;
        }

        #d1{
            background: green;
            /*
                border: 边框宽度 边框样式 边框颜色
            */
            border: 3px solid cyan;
            /*设置内边距*/
            padding-top: 40px;
            padding-left:40px;
            padding-right: 40px;
            padding-bottom: 40px;

        }

        #d2{
            background: orange;
            border:3px double black;

            /*上下左右*/
            /*padding:40px;*/

            /*上下  左右*/
            /*padding:30px 40px;*/

            /*上  左右  下*/
            /*padding:20px 30px 40px;*/

            /*上，右，下，左*/
            padding:20px 30px 40px 50px;


            /*设置外边距*/
            /*margin-top:40px;*/
            /*margin-left:40px;*/
            /*margin-bottom: 40px;*/
            /*margin-right: 40px;*/

        }

        #d3{
            background: red;
            border:3px dotted #000;
            /*上下左右*/
            /*margin:40px;*/

            /*上下， 左右*/
            /*margin:20px 30px;*/

            /*上   左右   下*/
            /*margin:20px 30px 40px;*/

            /*上  右  下  左*/
            margin:20px 30px 40px 50px;
        }

        #d4{
            background: blue;
            border:3px dashed #000;
        }

    </style>
</head>
<body>
    <div id="d1">
        这是第一个div
    </div>
    <div id="d2">
        这是第二个div
    </div>
    <div id="d3">
        这是第三个div
    </div>
    <div id="d4">
        这是第四个div
    </div>
</body>
</html>